<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>盒子模型-填充</title>
    <style>
        .box{
            /*盒子的宽高是通过 width 和 hegith 编写*/
            /*属性值的单位是 像素 px*/
            width: 100px;
            height: 100px;

            /*给盒子增加背景色*/
            background-color: red;

            /*padding: 10px;*/
            /* 上右下左 统一使用 10px*/

            /* 上右下左 */
           /* padding-top: 20px;
            padding-right: 30px;
            padding-bottom: 40px;
            padding-left: 50px;*/

            /* 如果只使用 padding属性来设置 上右下左的padding的时候，也是可以的，方向 顺时针 上右下左*/
            /*padding: 20px 30px 40px 50px;*/
            /*padding 设置四个值*/
            /* 还可以设置 两个值（第一值代表 上下，第二个值代表 左右）  三个值（第一个值 上 第二值 左右 第三个值 下 ？）*/

            padding: 10px 20px 30px;
            /*padding: 10px 20px 30px 20px;*/
            /* 完整写法*/




        }
    </style>
</head>
<body>

    <h1>盒子模型的基本概念</h1>

    <p>什么是盒子的填充？ 指的是盒子的内容和边之间的距离</p>


    <div class="box">
        内容内容内容内容内容内容容内容内容容内容内容容内容内容容
    </div>

<!--ctrl+alt+l 快速的格式化代码-->
</body>
</html>